<template>
  <div class="flow-chart">
    <v-md-preview :text="mermaidCode" />
  </div>
</template>

<script>
import mermaid from 'mermaid'
export default {
  props: {
    steps: {
      type: Array,
      default: () => []
    },
    current: String
  },
  computed: {
    mermaidCode() {
      const flowStr = this.genChartStr()
      const currentStyle = this.genCurrentStyle()
      return `\`\`\`mermaid
flowchart LR;
${flowStr};
${currentStyle}
\`\`\`
      `
    }
  },
  methods: {
    genChartStr() {
      const ary = this.steps
        .map((x) => (x.next ? x.next.map((y) => `${x.step}-->${y}`) : []))
        .flat()
      return ary.join(';\r\n')
    },
    genCurrentStyle() {
      return this.current ? `style ${this.current} fill:#f9f` : ''
    }
  }
}
</script>
<style scoped>
.flow-chart {
  text-align: center;
}
</style>
